<script setup lang="tsx">

import {SelectOption} from "naive-ui";
import {$t} from "@/locales";
import FlatTable from '@/custom/components/flat-table.vue'
import {fetchDocList} from "@/service/api";
import {inject, reactive, ref} from "vue";
import {useRouter} from "vue-router";

const ft = ref(null)

const title = $t('page.doc.list.title')

const router = useRouter()

const bucket = router.currentRoute.value.query['bucket']

console.log(bucket)

const config = {
  apiFn: fetchDocList,
  showTotal: true,
  apiParams: reactive({
    page: 1,
    size: 10,
    bucket:bucket,
  }),
  columns: () => [
    {
      key: 'code',
      title: $t('page.doc.list.meta.code'),
      align: 'left',
      width: 50,
      ellipsis: {
        tooltip: true
      }
    },
    {
      key: 'name',
      title: $t('page.doc.list.meta.name'),
      align: 'left',
      width: 50,
      ellipsis: {
        tooltip: true
      }
    },
    {
      key: 'digest',
      title: $t('page.doc.list.meta.digest'),
      align: 'left',
      width: 50,
      ellipsis: {
        tooltip: true
      }
    },
    {
      key: 'bucket',
      title: $t('page.doc.list.meta.bucket'),
      align: 'left',
      width: 50,
      ellipsis: {
        tooltip: true
      }
    },
    {
      key: 'filePath',
      title: $t('page.doc.list.meta.path'),
      align: 'left',
      width: 50,
      ellipsis: {
        tooltip: true
      }
    },
    {
      key: 'fileSize',
      title: $t('page.doc.list.meta.size'),
      align: 'left',
      width: 50,
      ellipsis: {
        tooltip: true
      }
    },
  ]
}

</script>

<template>
  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <FlatTable ref="ft" :title="title" :config="config"></FlatTable>
  </div>
</template>

<style scoped>

</style>
